<template>
	<div class="video-content-container">
		<image controls @click="preview" :src="thumbnailUri()" />
		<view class="wxfont play play-button" @click="preview" />
	</div>
</template>

<script>
	import Message from '@/wfc/messages/message'
	import store from '@/store'
	import MessageStatus from '../../../../wfc/messages/messageStatus'
	import Config from '../../../../config'

	export default {
		name: 'VideoMessageContentView',
		props: {
			message: {
				type: Message,
				required: true
			},
			isInCompositeView: {
				default: false,
				type: Boolean,
				required: false
			}
		},
		methods: {
			thumbnailUri() {
				console.log('xxx thumbnailUri 000')
				if (this.message.status === MessageStatus.Sending) {
					return Config.DEFAULT_VIDEO_POSTER
				} else {
					return 'data:video/jpeg;base64,' + this.message.messageContent.thumbnail
				}
			},
			preview() {
				let message = this.message
				if (this.isInCompositeView) {
					this.$parent.previewCompositeMessage(message.messageUid)
				} else {
					console.log('preview', message.messageContent.remotePath)
					uni.navigateTo({
						url: `/pages/misc/PreviewVideoPage?url=${message.messageContent.remotePath}`,
						fail: (e) => {
							console.log('navigate to PreviewVideoPage error', e)
						}
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.video-content-container {
		margin: 0 10px;
		position: relative;
		border: 1px solid #efefef;
		border-radius: 5px;
	}

	.video-content-container image {
		max-height: 200px;
		max-width: 200px;
		border-radius: 5px;
		overflow: hidden;
	}

	.play-button {
		position: absolute;
		left: 50%;
		top: 50%;
		color: white;
		font-size: 60px;
		transform: translate(-50%, -50%);
	}

	.right-arrow:before {
		border-left-color: white;
	}

	.left-arrow:before {
		border-left-color: white;
	}
</style>
